<template>
	<picker :value="value" mode="selector" :range="range" range-key="name" @change="change">
		<fui-form-item label="公司类型" asterisk arrow highlight>
			<view v-if="value===undefined" class="fs-color__label">请选择公司类型</view>
			<view v-else>{{label}}</view>
		</fui-form-item>
	</picker>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue';

	const customer_category = defineModel('customer_category')

	const range = ref([
		{ name: "个体", id: "0", },
		{ name: "小规模纳税人", id: "1", },
		{ name: "一般纳税人", id: "2", },
	])
	const value = ref()


	const change = (e) => {
		value.value = e.detail.value
	}

	const label = ref('')
	watch(value, (val) => {
		if (val !== undefined) {
			label.value = range.value[val].name
			customer_category.value = range.value[val].id
		}
	}, { immediate: true })

	onMounted(async () => {
		if (!(customer_category.value === '' || customer_category.value === null)) {
			const index = range.value.findIndex(em => em.id === String(customer_category.value))
			if (index !== -1) {
				value.value = index
			}
		}
	})
</script>

<style>
</style>